<!DOCTYPE html>
<html lang="en">
  
  <head>
    <meta charset="utf-8">
    <title>SMS Gateway</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link type="text/css" href="css/bootstrap.css" rel="stylesheet">
    <link type="text/css" href="css/validationEngine.jquery.css" rel="stylesheet">
    <link type="text/css" href="css/custom-theme/jquery-ui-1.10.0.custom.css" rel="stylesheet" />
    <link type="text/css" href="css/font-awesome.min.css" rel="stylesheet" />
    <link type="text/css" href="css/DT_bootstrap.css" rel="stylesheet">
    
    <style type="text/css">
		  .grey-bg{
        background-color: #f5f5f5;
		  }
		  
		  #footer{
  			font-size: 11px;
  			padding: 0px;
  			margin: 0px;
		  }
      #content {
        display: table;
        text-align: center;
        width: 100%;
        height: 100vh;
      }
      #position-center {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
      }
      #content form {
        display: inline-block;
        width: 400px;
        border: 3px solid #CCC;
        border-radius: 3px;
        padding: 30px 0;
      }
      .form-horizontal .control-label {
        width: 100px;
      }
      .form-horizontal .controls {
        margin-left: 120px;
        text-align: left
      }
      .form-horizontal .control-group:last-child {
        margin-bottom: 0;
      }
      #form-header {
        padding-bottom: 30px;
        font-size: 18pt;
        font-weight: bold;
      }
    </style>
    
    <link type="text/css" href="css/bootstrap-responsive.css" rel="stylesheet">
    <link rel="shortcut icon" href="ico/favicon.ico">
    
    <script src="js/jquery.js"></script>
  </head>

  <body>
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container-fluid">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="#"><img src="img/seo-logo.png" style="margin-top:-7px; margin-bottom:-5px;"></a>
          <div class="nav-collapse collapse">            
            <ul class="nav pull-right">              
              
            </ul>
          </div><!--/.nav-collapse -->          
        </div>
      </div>
    </div>
    
    <div id="fixed-hand">
      <img src="" alt="">
    </div>

    <div id="content">
      <div id="position-center">

        <form class="form-horizontal" action="inbox.php" method="post" accept-charset="UTF-8">
          <div id="form-header">
            Gerbang Masuk Aplikasi
          </div>
          <div class="control-group">
            <label class="control-label" for="inputUsername">Username</label>
            <div class="controls">
              <input type="text" id="inputUsername" placeholder="Masukkan Username">
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="inputPassword">Password</label>
            <div class="controls">
              <input type="password" id="inputPassword" placeholder="Masukkan Password">
            </div>
          </div>
          <div class="control-group">
            <div class="controls">
              <button type="submit" class="btn">Sign in</button>
              <button class="btn btn-danger">Lupa Password</button>
            </div>
          </div>
        </form>
      </div>
    </div>   
       
    <script src="js/jquery-ui-1.10.0.custom.min.js" type="text/javascript"></script>
    <script src="js/jquery.validationEngine.js"></script>
    <script src="js/languages/jquery.validationEngine-ina.js"></script>      
    <script src="js/bootstrap.js"></script>
    <script src="js/jquery.dataTables.js"></script>
    <script src="js/DT_bootstrap.js"></script>   
        
    <script type="text/javascript">
		  $('document').ready(function(){
			  /*Fade In Content*/
			  $(".span9").css("display","none");
			  $('.span9').fadeIn('slow');
			
			  $(".validatedForm").validationEngine();
			
			  $('.datePicker').datepicker({
				  changeYear:'true',
				  changeMonth:'true',
				  yearRange:'1945:+2',         
				  dateFormat: 'yy-mm-dd'
			  });
		  });
    </script>
  </body>
</html>

